<template>
  <div>
    <h1 style="text-align: center">
      <div>
        一言
        <el-button :loading="quoteLoading" icon="el-icon-refresh" circle style="background-color: #E9EEF3" size="mini" @click="init"/>
      </div>
    </h1>
    <h4 style="text-align: center">
      <div>
        {{ quote.content + " ——— " + quote.author }}
      </div>
    </h4>

  </div>
</template>

<script>

import quoteApi from '../../api/quoteApi'

export default {
  name: 'Quote',
  data() {
    return {
      quoteLoading: false,
      quote: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.quoteLoading = true
      quoteApi.getQuote().then(res => {
        this.quoteLoading = false
        this.quote = res.data
      }).catch(res => {
        this.quoteLoading = false
      })
    }
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #E9EEF3;
  color: #333;
}

.el-rate__icon{
  font-size: 20px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 55px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 55px;
}
.is-selected {
  color: #1989FA;
}
.el-calendar-table__row .current .calendar-day{
  text-align: center;
  color: #202535;
  background-color: #FFFFFF;
  line-height: 30px;
  font-size: 36px;
  font-family: '思源黑体 CN 500', '思源黑体 CN Regular', '思源黑体 CN';
  font-weight: 700;
  /*margin-top: 15px;*/
}
.el-calendar-table__row .prev .calendar-day,
.el-calendar-table__row .next .calendar-day
{
  text-align: center;
  /* color: #202535; */
  line-height: 30px;
  font-size: 36px;
  font-family: '思源黑体 CN 500', '思源黑体 CN Regular', '思源黑体 CN';
  font-weight: 700;
  /*margin-top: 15px;*/
}
/* .el-calendar-table__row .current,.el-calendar-table__row .prev,.el-calendar-table__row .next{
  height: 100px;
} */

.is-selected{
  font-family: '思源黑体 CN 500', '思源黑体 CN Regular', '思源黑体 CN';
  font-weight: 700;
  font-size: 24px;
  margin-top: 5px;
  text-decoration: none;
  /*color: rgb(104, 143, 235);*/
}
.is-selected-select{
  color: rgb(104, 143, 235);
}
.is-selected-warn{
  color: rgb(240,178,12);
}
.is-selected-error{
  color: rgb(255,0,0);
}
.el-calendar-table tr td:first-child {
  border-left: none;
}
.el-calendar-table tr:first-child td {
  border-top: none;
}
.el-calendar-table td {
  border-bottom: none;
  border-right: none;
  /*vertical-align: top;*/
  text-align: center;
  -webkit-transition: background-color .2s ease;
  transition: background-color .2s ease;
}
.el-calendar-table .el-calendar-day {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 0 15px 0;
  background-color: #FFFFFF;
  height: 55px;
}
.el-calendar-table .current .el-calendar-day:hover {
  cursor: pointer;
  /*background-color: rgb(104,143,235);*/
  /*color: #fff;*/
  border-radius: 10px;
}
.el-calendar-table .prev .el-calendar-day:hover,
.el-calendar-table .next .el-calendar-day:hover {
  background-color: #fff;
}
.el-calendar-table .current .el-calendar-day:hover .calendar-day,
.el-calendar-table .current .el-calendar-day:hover .is-selected {
  /*color: #fff;*/
}
</style>
